<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <form action="/checkusername" method="get" onsubmit="return false"> -->
        <!-- 校验用户名是否正确 -->
        姓名 <input type="text" name="username" class="username" />
        <p class="info">提示信息</p><br>
        密码<input type="text" name="pwd" /><br>
        <input type="submit" class="sub" value="提交" />
    <!-- </form> -->
    <script>
        // ajax : a: async j : javascript  a : and x : xml
        // 异步的JavaScript（json） 和  xml
        // ajax ，是做前后端数据交互的.
        // json 和 xml 是主流的数据传输格式。
        // ajax 数据交互： 客户端主动请求数据 ， 不会刷新页面
        // form表单提交数据 、通过地址栏querystring传递数据。 ： 必须基于跳转刷新
        // 后端的数据可以通过ejs 渲染出来 ： 服务端推送数据（ssr： server send render）


        // 发送get形式的ajax；
        // 当点击提交的时候发送ajax 然后把用户名携带到后端进行校验用户名是否正确
        let subEle = document.querySelector(".sub");
        let usernameEle = document.querySelector(".username");

        usernameEle.onblur = function(){
            // 1.创建一个ajax对象
         let xhr=new XMLHttpRequest()
         let username=usernameEle.value
//2.配置ajax对象
        xhr.open('get',"/checkusername?username="+username)
              // 3.发送ajax到后端
              xhr.send()
        
        // 4.接收服务器返还的内容
        xhr.onload=function (){
            console.log(xhr.responseText)
            let res = JSON.parse(xhr.responseText);
            document.querySelector(".info").innerHTML = res.info;
        }
        }

  
    </script>
</body>
</html>